<script setup>
import { reactive, computed } from "vue";

const formState = reactive({
  username: "",
  password: "",
  remember: true,
});
const onFinish = (values) => {
  console.log("Success:", values);
};
const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});
</script>

<template>
  <header class="main-header" style="background-color: #f5f5f5; padding: 2px">
    <a-page-header
      style="border: 2px solid rgb(235, 237, 240)"
      title="欢迎使用医数通健康管理平台"
      :ghost="true"
      :avatar="{
        src: 'https://s2.loli.net/2024/10/12/5rXEZGoHny9wIvC.jpg',
        shape: 'square',
        size: 'large',
      }"
    >
    </a-page-header>
  </header>
  <body class="main-body">
    <div
      style="
        padding: 30px;
        min-height: 660px;
        background-image: url(https://s2.loli.net/2024/10/13/IwThWnPkOSAN3Z2.jpg);
        background-size: 100% 100%;
        background-attachment: fixed;
      "
    >
      <a-card
        title="请先登录"
        :hoverable="true"
        :bordered="false"
        style="width: 350px; margin: 100px 100px 50px auto"
      >
        <a-form
          :model="formState"
          name="normal_login"
          class="login-form"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-form-item
            label="Username"
            name="username"
            :rules="[
              { required: true, message: 'Please input your username!' },
            ]"
          >
            <a-input v-model:value="formState.username">
              <template #prefix>
                <UserOutlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item
            label="Password"
            name="password"
            :rules="[
              { required: true, message: 'Please input your password!' },
            ]"
          >
            <a-input-password v-model:value="formState.password">
              <template #prefix>
                <LockOutlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item>
            <a-button
              :disabled="disabled"
              type="primary"
              html-type="submit"
              class="login-form-button"
              style="width: 100%"
            >
              Log in
            </a-button>
            <br />
            Or
            <a href="">联系我们!</a>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </body>
  <footer>
    <a-layout>
      <a-layout-footer style="text-align: center">
        ujn 医数通健康管理系统
      </a-layout-footer>
    </a-layout>
  </footer>
</template>

<style scoped>
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
